@use '../../../styles/variables' as *;

.com-drawer {
  .el-drawer {
    &__header {
      margin-bottom: 0;
      padding: 16px 20px;
      border-bottom: 1px solid var(--editor-border-color);
    }

    &__body {
      padding: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    &__footer {
      border-top: 1px solid var(--editor-border-color);
      padding: 12px 20px;
    }
  }

  // 当appendToBody为true时，确保Drawer在正确的位置
  &.comment-panel-drawer {
    .el-overlay {
      // 确保遮罩层不挡住头部和底部
      z-index: 999;
    }

    .el-drawer {
      // 计算高度，排除头部和底部
      // 这些值应该与实际的编辑器头部和底部高度匹配
      top: var(--editor-toolbar-height, 60px) !important;
      height: calc(100vh - var(--editor-toolbar-height, 60px) - var(--editor-footer-height, 40px)) !important;
      bottom: var(--editor-footer-height, 40px) !important;
    }
  }
}

// Drawer 头部样式
.com-drawer-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

// Drawer 头部操作按钮容器
.com-drawer-header-actions {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

// Drawer 头部操作按钮项
.com-drawer-header-action {
  cursor: pointer;
  transition: color 0.2s ease-in-out;
  color: var(--el-color-info);
  display: inline-flex;
  align-items: center;
  justify-content: center;

  &:hover {
    color: var(--el-color-primary);
  }

  // 图标样式 - 支持 UnoCSS 图标类
  &[class*="i-"] {
    font-size: 18px;
    width: 18px;
    height: 18px;
  }
}

